<template>
  <view class="addAddress">
    <view class="box">
		<view class="line" v-for="(item, index) in chooseList" :key="index">
			<view class="title">{{ item.name }}</view>
			<view class="choose">
				<u-cell-group :border="false" :customStyle="lineStyle">
					<u-cell :title="item.title" :isLink="true" :border="false" :titleStyle="item.titleStyle"
						:arrow-direction="item.direction" @click="chooseItem(item)"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="line">
		  <view class="title">邮编</view>
		  <view class="choose">
		    <u-input
		      placeholder="请填写邮编"
		      border="none"
		      v-model="postcode"
		      :customStyle="inputStyle"
		    ></u-input>
		    <!-- placeholderStyle="{'font-size': '26rpx';
		  'color':' #999999'}" -->
		  </view>
		</view>
      <view class="line">
        <view class="title">收货人</view>
        <view class="choose">
          <u-input
            placeholder="请填写收货人"
            border="none"
            v-model="real_name"
            :customStyle="inputStyle"
          ></u-input>
          <!-- placeholderStyle="{'font-size': '26rpx';
		'color':' #999999'}" -->
        </view>
      </view>
      <view class="line">
        <view class="title">电话</view>
        <view class="choose">
          <u-input
            placeholder="请填写电话"
            border="none"
            v-model="phone"
            :customStyle="inputStyle"
          ></u-input>
          <!-- placeholderStyle="{'font-size': '26rpx';
        'color':' #999999'}" -->
        </view>
      </view>
	  
     <!-- <view class="line">
        <view class="title">州/省</view>
        <view class="choose">
          <u-input
            placeholder="请填写州/省"
            border="none"
            v-model="areaValue"
            :customStyle="inputStyle"
          ></u-input>
        </view>
      </view>
	  <view class="line">
	    <view class="title">城市</view>
	    <view class="choose">
	      <u-input
	        placeholder="请填写城市"
	        border="none"
	        v-model="cityValue"
	        :customStyle="inputStyle"
	      ></u-input>
	    </view>
	  </view> -->
	 
      <view class="line">
        <view class="title">详细地址</view>
        <view class="choose">
		  <textarea placeholder-style="background-color:#F5F5F5;padding-left:43rpx;padding:20rpx; font-size: 30rpx; color: #cccccc;" style="border: 1rpx solid #D5D5D5; padding: 20rpx; border-radius:16rpx; background-color: #FFFFFF; padding-left: 43rpx; width: 100%;"
			 v-model="detail" placeholder="请填写详细地址(州/城市/具体到门牌号)" maxlength="-1"
			 ></textarea>
          <!-- <u-input
            placeholder="请填写详细地址"
            border="none"
            v-model="detail"
            :customStyle="inputStyle"
          ></u-input> -->
          <!-- placeholderStyle="{'font-size': '26rpx';
        'color':' #999999'}" -->
        </view>
      </view>
      <view class="default row">
        <view class="checkbox">
          <u-checkbox-group
            v-model="allCheckbox"
            placement="column"
            shape="circle"
            @change="checkboxAll"
          >
            <u-checkbox
              :customStyle="{ marginTop: '3px' }"
              name="默认"
              :iconSize="20"
              :size="20"
            >
            </u-checkbox>
          </u-checkbox-group>
        </view>
        <view>设置为默认地址</view>
      </view>
      <view class="btn" @click="sureAdd">确认添加</view>
    </view>
	<!-- 选择列表 -->
	<u-picker :closeOnClickOverlay="true" :show="pickerShow" :columns="pickerColumns" :defaultIndex="defaultIndex"
		@confirm="confirm" @cancel="cancel"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 全选
      allCheckbox: [],
      // 收货人
      real_name: "",
      // 联系方式
      phone: "",
      // // 城市
      cityValue: "",
      // // 州/省
      areaValue: "",
	  // 邮编
	  postcode:"",
      // 详细地址
      detail: "",
      // 是否是默认地址
      defaultValue: false,
      // 输入框样式
      inputStyle: {
        border: "1rpx solid #D5D5D5",
        "border-radius": "16rpx",
        "background-color": "#FFFFFF",
        "padding-left": "43rpx",
        padding: "20rpx",
      },
	  chooseList: [{
	  		id: 0,
	  		name: "国家",
	  		title: "请选择国家",
	  		direction: "down",
	  		titleStyle: {
	  			"font-size": "28rpx",
	  			color: "#999999",
				"line-height":"48rpx"
	  		},
	  	},
	  	{
	  		id: 1,
	  		name: "收货区域",
	  		title: "请选择收货区域",
	  		direction: "down",
	  		titleStyle: {
	  			"font-size": "28rpx",
	  			color: "#999999",
				"line-height":"48rpx"
	  		},
	  	},
	  ],
	  // 选择框样式
	  lineStyle: {
	  	"border": "1px solid #D5D5D5",
	  	"border-radius": "8px",
		"line-height":"48rpx"
	  },
	  country: [],
	  area: [],
	  // 选择展示
	  pickerShow: false,
	  // 选择单项
	  pickerColumns: [],
	  // 收货人所在国家id
	  c_id:'',
	  // 收货人所在国家区域id
	  w_id:'',
	  id:'',
	  form:''
    };
  },

  onLoad(options) {
	if(options.form){
		this.form = JSON.parse(options.form);
	}
    if (options.info) {
      let info = JSON.parse(options.info);
      console.log(info, "info");
      this.real_name = info.real_name;
      this.phone = info.phone;
      this.chooseList[0].title = info.c_name;
	  this.chooseList[1].title = info.w_name;
	  this.c_id = info.c_id;
	  this.w_id = info.w_id;
      this.chooseList[0].titleStyle = "#333333";
	  this.chooseList[1].titleStyle = "#333333";
      this.detail = info.detail;
      this.defaultValue = info.is_default==1;
	  this.areaValue = info.state;
	  this.cityValue = info.city;
	  this.postcode = info.email;
      if (info.is_default==1) {
        this.allCheckbox.push("默认");
      }
	  if(info.id){
		  this.id = info.id;
	  }
      console.log(this.allCheckbox, "allCheckbox");
    }
	this.getCountryData();
  },

  methods: {
	  // 选择框选择
	  confirm(e) {
	  	console.log(e, "列表选项");
	  	this.chooseList[this.chooseIndex].title = e.value[0];
	  	this.chooseList[this.chooseIndex].titleStyle = "#333333";
	  	this.pickerShow = false;
	  	// 选择国家后给区域赋值
	  	if (this.chooseIndex == 0) {
	  		this.area = this.country[e.indexs[0]] && this.country[e.indexs[0]].list;
			this.c_id = this.country[e.indexs[0]].id;
	  	}else if (this.chooseIndex == 1) {
	  		this.w_id = this.area[e.indexs[0]].id;
	  	}
	  	this.chooseList.forEach((element) => {
	  		element.direction = "down";
	  	});
	  },
	  // 选择框取消
	  cancel() {
	  	this.pickerShow = false;
	  	this.chooseList.forEach((element) => {
	  		element.direction = "down";
	  	});
	  },
	  getCountryData(){
	  	this.$api.post({
	  	    url: "/ebapi/article_api/get_article_cate",
	  	    // data: {},
	  	    success: (res) => {
	  			this.country = res;
	  		},
	  	 })
	  },
	  chooseItem(item) {
	  	console.log(item,"item aaa")
	  	this.pickerColumns = [];
	  	this.chooseIndex = item.id;
	  	if(item.id == 1 && item.direction == "down" && this.chooseList[0].title=="请选择国家"){
	  		uni.showToast({
	  		    title: "请先选择国家",
	  		    icon: "none",
	  		    duration: 2000
	  		});
	  		return
	  	}
	  	if (item.direction == "down") {
	  		item.direction = "up";
	  		this.pickerShow = true;
	  		if (item.id == 0) {
	  			let country = this.country.map(it=>it.title);
	  			this.pickerColumns.push(country);
	  		} else if (item.id == 1) {
	  			let area = this.area.map(it=>it.title);
	  			this.pickerColumns.push(area);
	  		}
	  		if (item.titleStyle.color == "#999999") {
	  			this.defaultIndex = [];
	  		} else {
	  			this.defaultIndex.push(this.pickerColumns[0].indexOf(item.title));
	  		}
	  	} else {
	  		item.direction = "down";
	  	}
	  },
    // 选中默认
    checkboxAll(e) {
      console.log("checkbox", e);
      if (e[0]) {
        this.defaultValue = true;
      } else {
        this.allCheckbox = [];
      }
    },
    // 确认添加
    sureAdd() {
      if (!this.real_name) {
        this.$u.toast("请填写收货人信息");
        return;
      }
      if (!this.phone) {
        this.$u.toast("请填写电话");
        return;
      }
	  if (!this.c_id) {
	    this.$u.toast("请填写收货人国家");
	    return;
	  }
	  if (!this.w_id) {
	    this.$u.toast("请填写收货人地区");
	    return;
	  }
	  // if(!this.areaValue){
	  // 	this.$u.toast("请填写州/省");
	  // 	return;
	  // }
	  // if(!this.cityValue){
	  // 		  this.$u.toast("请填写城市");
	  // 		  return;
	  // }
	  if(!this.postcode){
	  	this.$u.toast("请填写邮编");
	  	return;
	  }
      
      if (!this.detail) {
        this.$u.toast("请填写收货人详细地址信息");
        return;
      }
      let info = {
        real_name: this.real_name,
        phone: this.phone,
        c_id: this.c_id,
        w_id: this.w_id,
        detail: this.detail,
        is_default: this.defaultValue,
		state:this.areaValue,
		city:this.cityValue,
		email:this.postcode
      };
	  if(this.id){
		  info.id = this.id;
	  }
	  this.$api.post({
	      url: "/ebapi/user_api/edit_user_address",
	      data: info,
	      success: (res) => {
		  if(this.form){
			this.$uniApi.to(`/pages/my/myAddress?form=${JSON.stringify(this.form)}`);
		  }else{
			this.$uniApi.to("/pages/my/myAddress");
		  }
	  	},
	   })
    },
  },
};
</script>

<style lang="scss">
.addAddress {
  padding: 24rpx;
  font-size: $uni-text-size-middle;

  .box {
    padding: 60rpx 40rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;
    opacity: 1;

    .line {
      margin-bottom: 34rpx;

      .title {
        font-size: $uni-text-size-middle;
        margin-bottom: 20rpx;
        color: #666666;
      }
    }

    .btn {
      margin-top: 135rpx;
      padding: 30rpx 0;
      border-radius: 50rpx;
      text-align: center;
      color: #ffffff;
      font-size: $uni-text-size-title;
      background: #2354e3;
      opacity: 1;
    }
  }
}
</style>
